<template>
	<view class="message">
		<view class="message_index" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
			<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
			<view class="message_item" v-for="(item,index) in messages" :key="index" v-if="messages.length">
				<!-- 消息头部 -->
				<view class="top x-bc">
					<view class="type pr">
						<view>系统消息</view>
						<view class="typedot pa" :class="{'chageColor': item.status}"></view>
					</view>
					<view class="date" v-if="item.reading_time != null">{{item.reading_time || '暂无时间'}}</view>
					<view class="date" v-if="item.reading_time == null">{{item.create_time || '暂无时间'}}</view>
				</view>
				<!-- 消息内容 -->
				<view class="content" @tap="to_detail(item)">
					<!-- 系统消息内容 -->
					<view class="system" >
						{{item.content}} 点击查看更多详情...
					</view>
				</view>
			</view>
			  <empty :null_data="null_data" v-if="!messages.length" />
			<view class="getMore" style="padding: 50rpx 0;" v-if="messages.length > 5">
				<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				//空状态
				null_data: {
				 null_img: this.imgUrl + 'nomessage.png',
				 text: '暂无消息~'
				},
				isName: false,
				isLoad: false,
				isNone: false,
				detail_Url: '/pages/user/message/detail/index',
				obj: {
					page: 1,
					pagesize: 10,
					member_id: 1
				},
				messages: [],
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
			}
		},
		onReachBottom() {
			this.getMore();
		},
		// onShow() {
		// 	this.getApi();
		// },
		methods: {
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			getApi() {
				// 查询用户消息
				this.$api('membermessage', this.obj).then(res => {
					let arr = res
					this.messages = arr.data.data
					this.messages.forEach(item => {
						if (item.reading_time != null) {
							item.status = 1
							item.reading_time = this.$tools.time_data(item.reading_time, 'z_date')
						} else {
							item.status = 0
						}
						if (item.create_time != null) {
							item.create_time = this.$tools.time_data(item.create_time, 'z_date')
						}
					})
				})
			},
			// 加载更多
			getMore() {
				if (this.isName) return;
				this.isNone = true;
				this.isLoad = true;
				setTimeout(() => {
					this.obj.page++
					this.$api('membermessage', this.obj).then(res => {
						res.data.data.forEach(item => {
							if (item.reading_time != null) {
								item.status = 1
								item.reading_time = this.$tools.time_data(item.reading_time,
									'z_date')
							} else {
								item.status = 0
							}
							if (item.create_time != null) {
								item.create_time = this.$tools.time_data(item.create_time,
									'z_date')
							}
						})
						let arr = [...this.messages, ...res.data.data]
						this.messages = arr
						if (!res.data.data.length) {
							this.isLoad = false;
							this.isName = true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				}, 1000)
			},
			// 路由跳转
			to_detail(item) {
				if(!item.status) {
					item.status = 1;
				}
				this.$store.dispatch('user/get_message_detail', item)
				this.$Router.push({
					path: this.detail_Url
				})
			}
		},
		mounted() {
			this.getApi();
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';

	.chageColor {
		background: transparent !important;
	}
</style>
